import './App.css';
import React, { Component } from 'react'
import Userlist from "./components/Userlist";
import ChatScreen from "./components/ChatScreen";
import SendScreen from "./components/SendScreen";

export default class App extends Component{
    state= {
        id_list: ["zhangsan", "lisi", "wangermazi"],
        touxiang_path: ["./touxiang.png", "./touxiang.png", "./touxiang.png"],
        userlist:[{id:"zhangsan",touxiang_path:"./touxiang.png"},
            {id:"lisi",touxiang_path:"./touxiang.png"},
            {id:"wangermazi",touxiang_path:"./touxiang.png"},
        ],
        recentlyMessages: {
            "zhangsan": [
                    ["zhangsan","./touxiang.png", "2021.06.26:23:00", "Hello"],
                    ["liangzi","./touxiang.png", "2021.06.26:23:00", "Hi"],
                    ["zhangsan","./touxiang.png", "2021.06.26:23:00", "Do you eat lunch?"],
                    ["liangzi","./touxiang.png", "2021.06.26:23:00", "NONONO!"],
                    ["liangzi","./touxiang.png", "2021.06.26:23:01", "Do You?"],
                    ["liangzi","./touxiang.png", "2021.06.26:23:05", "aHa?"],
                    ["zhangsan","./touxiang.png", "2021.06.26:23:05", "Yes"],
                    ["liangzi","./touxiang.png", "2021.06.26:23:05", "Interesting."],
                ],
            "lisi": [
                    ["lisi","./touxiang.png", "2021.06.26:23:00", "在吗？"],
                    ["liangzi","./touxiang.png", "2021.06.26:23:00", "不在，滚。"],
                ],
            "wangermazi": [
                    ["wangermazi","./touxiang.png", "2021.06.26:23:00", "在吗？"],
                    ["liangzi","./touxiang.png", "2021.06.26:23:00", "有点事，不限聊。"],
                ]
            },
        now_messages: [["NONE","NONE","NONE","NONE",],],
        now_chat_object_id: "NONE",
        // text_for_send: "",
    }
    update=()=>{
        let nowid=this.state.now_chat_object_id;
        if(nowid==="NONE"){
            nowid=this.state.id_list[0]
            this.setState({now_chat_object_id:nowid})
            this.setState({now_messages:this.state.recentlyMessages[nowid]})
        }
    }
    gotoChat=(id)=>{
        // change the state of something here.
        console.log("IN gotoChat, the id is:",id)
        this.setState({now_chat_object_id:id},()=>{
            const {recentlyMessages}=this.state;
            const recentIds=recentlyMessages[id];
            this.setState({now_messages:recentIds});
        });
    }

    sendMessage=(text)=>{
        const {id_list,touxiang_path,userlist,recentlyMessages}=this.state;
        console.log("IN SendMessage")
        // alert(text)
        const d= new Date().toDateString();
        const target_id=this.state.now_chat_object_id;
        const touxiang_patha="./touxiang.png";
        const this_message=[target_id,touxiang_patha,d,text];

        // if target_id not in id_list
        if((id_list.indexOf(target_id)===-1 || id_list.indexOf(target_id)>=id_list.length)){

            id_list.push(target_id)
            touxiang_path.push("./touxiang.png")
            userlist.push({id:target_id,touxiang_path:"./touxiang.png"})

            // add mymessages to recentlyMessages
            let mymessages=[];
            mymessages.push(this_message)
            recentlyMessages[target_id]=mymessages;
            console.log("---------------")
            console.log(recentlyMessages)

            this.setState({id_list:id_list,
                touxiang_path:touxiang_path,userlist: userlist,
            recentlyMessages: recentlyMessages},()=>{
                this.setState({now_messages:recentlyMessages[this.state.now_chat_object_id]})
            })
        }
        else{
            let {recentlyMessages}=this.state;
            // console.log("IN SendMessage: ",typeof recentlyMessages)
            let mychangeidlist=recentlyMessages[target_id];
            mychangeidlist.push(this_message);
            delete recentlyMessages[target_id];
            // console.log("IN SendMessage: ",typeof recentlyMessages)
            recentlyMessages[target_id]=mychangeidlist
            console.log("IN SendMessage: ",recentlyMessages)
            this.setState({recentlyMessage:recentlyMessages},()=>{
                this.setState({now_messages:recentlyMessages[this.state.now_chat_object_id]})
                // alert(this.state.recentlyMessages[this.state.now_chat_object_id])
            });
        }
    }

    render() {
        // this.init()
        // get data
        const {now_messages,userlist,now_chat_object_id}=this.state;
        // console.log("IN APP,userlist ",userlist)
        return(
            <div className={"MainPage"}>
                <div className="left">
                    <Userlist userlist={userlist} now_chat_object_id={now_chat_object_id}
                              gotoChat={this.gotoChat} />
                </div>
                <div className="right">
                    <ChatScreen pastChattings={now_messages} />
                </div>
                <div>
                    <SendScreen sendMessage={this.sendMessage}  />
                </div>
            </div>
        )
    }

}
